<script setup lang="ts">
import nunjucks from 'nunjucks'
import { watch } from 'vue'
import { GetTemplateList, GetTemplateContent, GetOptionsByTemplateName } from '../../wailsjs/go/main/App';
import Clipboard from 'clipboard'
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'IndexPage',
})

nunjucks.configure({ autoescape: true });

// model define begin
const temp = ref('')
const res = ref('')
const templateList = ref<string[]>([])
const currentTemplate = ref('')
const templateSelectorOptions = computed(() => templateList.value.map(it => ({
  label: it,
  value: it
})))

function genCode(template: string, opts: Record<string, string>) {
  return nunjucks.renderString(template, opts);
}
type TableDataType = {
  key: string;
  value: string;
  isEditing: boolean
}
const modelDatas = ref<TableDataType[]>([])
//model define end

//init begin
GetTemplateList().then(list => {
  console.log(list)
  templateList.value = list
})

watch(currentTemplate, (newTemplateFilename) => {
  console.log('current template change')
  GetTemplateContent(newTemplateFilename).then(data => {
    temp.value = data
    console.log('template content', data)
  })
  GetOptionsByTemplateName(newTemplateFilename).then(data => {
    modelDatas.value = data.map(it => ({
      key: it,
      value: '',
      isEditing: true
    }))
  })
})

//init end

// actions begin
function handleGen() {
  const opts: Record<string, string> = {}
  modelDatas.value.forEach(it => opts[it.key] = it.value)
  res.value = genCode(temp.value, opts)
}

function handleEdit(idx: number, data: TableDataType) {
  modelDatas.value[idx].isEditing = !modelDatas.value[idx].isEditing
}

function copy() {
  const cp = new Clipboard('#copy')
  cp.on('success', e => {
    ElMessage.success('复制成功')
    console.log('复制成功')
    cp.destroy()
  })
  cp.on('error', e => {
    ElMessage.error('复制失败')
    console.log('复制失败')
    cp.destroy()
  })
}
// actions end
</script>

<template>
  <div flex="~ col" justify-center items-center space-y-2xl>
    <div class="flex items-center">
    <span>Current template: </span>
      <el-select v-model="currentTemplate" class="m-2" placeholder="Select">
        <el-option v-for="item in templateSelectorOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div>
      <el-table :data="modelDatas" style="width: 100%">
        <el-table-column label="Key" prop="key" width="180">
          <template #default="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.key }}</span>
            <el-input v-else v-model="scope.row.key" />
          </template>
        </el-table-column>
        <el-table-column label="Value" prop="value" width="180">
          <template #default="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.value }}</span>
            <el-input v-else v-model="scope.row.value" />
          </template>
        </el-table-column>
        <el-table-column align="right" width="100">
          <template #default="scope">
          <div v-if="!scope.row.isEditing">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          </div>
          <div v-else>
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Ok</el-button>
          </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="space-y-2">
    <div class="flex items-center">
      <el-button @click="handleGen">Generate</el-button>
      <el-button id="copy" :data-clipboard-text="res" data-clipboard-action="copy" @click="copy">Copy to Cipboard</el-button>
    </div>
      <p>Result:</p>
      <el-card>
        {{ res }}
      </el-card>
    </div>
  </div>
</template>
